/* eslint-disable */
<template>
    <div id="app">
        <app-header>
            <div>收货地址</div>
            <div slot="headerRightBtn" @click="goToHome">
                <span class="icon-home"></span>
            </div>
            <div slot="headerLeftBtn" @click="goToVipInfo">
                <span class="icon-back"></span>
            </div>
        </app-header>
        <div class="page delivery_address_manager">
            <div  v-for="(deliveryAddressItem, index) in deliveryAddressItems" :key="index" class="delivery_address_item" :class="[index!==deliveryAddressItems.length?'scale-1px':'']">
                <div @click="useAddress(deliveryAddressItem)" class="delivery_address_item_info">
                    <div class="name_phone">{{deliveryAddressItem.name}},{{deliveryAddressItem.phone}}</div>
                    <div class="delivery_address_val">{{deliveryAddressItem.province+deliveryAddressItem.city+deliveryAddressItem.address}}</div>
                    <div class="address_action">
                        <label  @click.stop class="address_action_label address_action_btn">
                            <span class="mint-checkbox">
                                <input type="radio" @change="handlerCheckedStatus(deliveryAddressItem)" :checked="deliveryAddressItem.isDefault" class="mint-checkbox-input">
                                <span class="mint-checkbox-core small"></span>
                                <span class="default_address_btn">默认</span>
                            </span>
                        </label>
                        <span class="address_action_btn address_action_btn_delete" @click.stop="del(deliveryAddressItem)">
                            删除
                        </span>
                    </div>
                </div>
                <div class="delivery_address_item_icon" @click.stop="$router.push('/delivery_address_set/'+deliveryAddressItem.id)">
                    <i class="mint-cell-allow-right"></i>
                </div>
            </div>
            <div class="page-button-group">
                <mt-button size="large" type="danger" @click="$router.push('/delivery_address_set')">新增地址</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import { list, mod, del } from './api'
import utils from '@utils'
import { Button } from 'mint-ui'

export default {
    name: 'app',
    components: {
        mtButton: Button
    },
    data() {
        return {
            deliveryAddressItems: []
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.$indicator.open({
                spinnerType: 'fading-circle',
                text: '加载中...'
            });
            list().then((data) => {
                this.$indicator.close();
                this.deliveryAddressItems = data;
            })
        },
        goToVipInfo() {
            this.$router.back();
        },
        goToHome() {
            utils.goToPage("index.html")
        },
        handlerCheckedStatus(deliveryAddressItem) {

            if(!deliveryAddressItem.isDefault) {
                deliveryAddressItem.isDefault = true;
                mod(deliveryAddressItem).then(() => {
                    for(var i=0;i<this.deliveryAddressItems.length;i++) {
                        if(deliveryAddressItem !== this.deliveryAddressItems[i]) {
                            this.deliveryAddressItems[i].isDefault = false;
                        }
                    }
                    this.$toast({
                        type: "success",
                        message: "默认地址设置成功"
                    })
                }, () => {
                    deliveryAddressItem.isDefault = false;
                })
            }
        },
        del(deliveryAddressItem) {
            this.$messagebox({
                message: '确定删除该地址？',
                showCancelButton: true
            }).then((res)=> {
                if(res === "confirm") {
                    del(deliveryAddressItem).then(()=> {
                        this.init();
                    })
                }
            })
        },
        useAddress(deliveryAddressItem) {
            if (this.$route.query.type == 'add') {
                this.$router.push('/delivery_address_set/'+deliveryAddressItem.id)
            } else {
                sessionStorage.setItem('deliveryAddressItem', JSON.stringify(deliveryAddressItem))
                this.$router.back();
            }
        }
    }
}
</script>

<style scoped>
.page-button-group {
  margin-top: 30px;
	padding: 0 10px;
}
.delivery_address_manager {
    margin-top: 4px;
}
.base-info-item-icon {
    width: 30px;
}
.delivery_address_item {
    background: #fff;
    padding-left: 10px;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    font-size: 14px;
}
.delivery_address_val {
    color: #666;
}
.delivery_address_item_info {
    flex: 1;
}
.delivery_address_item_icon {
    width: 30px;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.address_action {
    display: flex;
}
.address_action_btn {
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 20px;
    display: flex;
    align-items: center;
    width: 56px;
    background: #fff;
    box-sizing: border-box;
    justify-content: center;
}
.default_address_btn {
    display: inline-block;
    margin-left: 3px;
    padding-right: 3px;
    position: relative;
    color: #666;
    top: 1px;
}
.address_action_btn_delete {
    color: #f00;
    justify-content: center;
    width: 40px;
    margin-left: 10px;
}
</style>
